import React, { ReactNode } from 'react'
import { Input , Button,Modal,message } from 'antd'
import { BaseListPage, IBaseListPageProps, IBaseListPageState, validators, columnRenders, http, UdModal, UdModalForm, uaaApp } from '../../../lib'
import TextArea from 'antd/lib/input/TextArea'
import dayjs from 'dayjs'
import apis from "@/apis/Suggestions";


const confirm = Modal.confirm

const AddBtnAuth = 'customer_dealer_complaint_type_manager_add'
const DeleteBtnAuth = 'customer_dealer_complaint_type_manager_delete'
const UpdateBtnAuth = 'customer_dealer_complaint_type_manager_update'

class Classification extends BaseListPage<IClassificationProps, IClassificationState> {
  constructor(props:IClassificationProps){
    super(props)
    this.state = {
      title: '投诉建议分类管理',
      queryApi: apis.Classifictionlist,
      method:'GET',
      conditions: [
        { id: 'complaints', label: '投诉建议类型'},
      ],
      rowKey: 'id',
      columns: [
        { title: '序号', dataIndex: 'id', render: (text,record,index)=>index+1 },
        {
          title: '投诉建议类型', dataIndex: 'type',
        },
        {
          title: '描述',
          dataIndex: 'describes',
        },
        {
          title: '创建时间',
          dataIndex: 'createdTime',
          render:(time)=>{return <span>{dayjs(time).format('YYYY-MM-DD HH:mm:ss')}</span>}
        },
        {
          title: '创建人',
          dataIndex: 'createdBy',
        },
        { title: '修改时间', dataIndex: 'updatedTime',
           render:(time)=>{return <span>{dayjs(time).format('YYYY-MM-DD HH:mm:ss')}</span>}
        },
        {
          title: '修改人',
          dataIndex: 'updatedBy',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          fixedWidth: '70px',
          render: columnRenders.operate([
            {
              title: '删除', auth: DeleteBtnAuth, action: (text: any, record: any) => {
                confirm({
                  title: '确定要删除此条数据吗？',
                  onOk: () => {
                    return http.post(apis.DeleteClassifiction,{id:record.id}).then(res=>{
                      message.success('删除成功')
                      this.query()
                    })
                  }
                })
                
              }
            },
            {
              title: '编辑', auth: UpdateBtnAuth, action: (text: any, row: any) => this.ModelEdit(row)
            },
          ])
        },
      ],
      leftBtns: [
        uaaApp.canUse(AddBtnAuth) && <Button type="primary"  onClick={this.openAddModal}>新增</Button>
      ],
      // useColumnCustomize: true,
      tableProps: {
        rowSelection: null,
        // scroll: { x: '1900px' }
      },

    }
  }
  private openAddModal = () =>{ //新增
    const formLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
    }
    UdModal.open({
      title: '新增',
      content: <UdModalForm {...formLayout} items={[
        { id: 'type', label: '投诉建议类型', rules: [validators.required, validators.max(20)] },
        { id: 'describes', label: '描述', rules: [validators.noSpecialSymbol, validators.max(50)], render: <TextArea /> },
      ]} />,
      onOk: (values) => {
         return http.post(apis.AddClassifiction,values).then(res=>{
          message.success('新增成功')
          this.query()
         })
      }

    })
  }
  private ModelEdit = (row) => { //编辑
    const formLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
    }
    UdModal.open({
      title: '编辑',
      content: <UdModalForm {...formLayout} items={[
        { id: 'type', label: '投诉建议类型', rules: [validators.required, validators.max(20)] },
        { id: 'describes', label: '描述', rules: [validators.noSpecialSymbol, validators.max(50)], render: <TextArea /> },
      ]} values={row} />,
      onOk: (value) => {
        const values ={
          id: row.id,
          type: value.type,
          describes: value.describes
        }
        return http.post(apis.UpdateClassifiction,values)
         .then((res)=>{
           console.log(res)
           if(res.status==200){
            message.success('编辑成功')
           }else{
            message.error('编辑失败')
           }
           this.query()
         })
      }
    })
  }
  
}


interface IClassificationProps extends IBaseListPageProps {

}

interface IClassificationState extends IBaseListPageState {

}

export default Classification